import React, { PureComponent } from 'react'
import './style.css'

export default class MovablePanel extends PureComponent {

    state = {
        x: 0,
        y: 0
    }

    divRef = React.createRef()

    handleMouseMove = (e) => {
        // 更新 x 和 y 的值
        const { left, top } = this.divRef.current.getBoundingClientRect()
        this.setState({
            x: e.pageX - left,
            y: e.pageY - top
        })
        console.log(this.state.x, this.state.y);
    }

    render() {
        const { x, y } = this.state
        return (
            <div ref={this.divRef} className='point' onMouseMove={this.handleMouseMove}>
                {/* 一个可以移动的方块 */}
                <div style={{
                    height: 100,
                    width: 100,
                    backgroundColor: '#008C8C',
                    position: 'absolute',
                    left: x ? x - 50 : 0,
                    top: y ? y - 50 : 0
                }}></div>
            </div>
        )
    }
}
